<template>
  <el-cascader style="width:250px;" v-bind="$attrs" :options="options" :value="value" @input="handleInput" @change="handleChange"></el-cascader>
</template>

<script>
import { regionData, regionDataPlus, TextToCode, CodeToText } from 'element-china-area-data'
export default {
  name: 'CityPicker',
  components: {},
  inheritAttrs: false,
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    withAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    options() {
      return this.withAll ? regionDataPlus : regionData
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    },
    handleInput(value) {
      this.$emit('input', value)
    },
    getValueTextObj(inputValue) {
      const value = inputValue || this.value
      return {
        province: CodeToText[value[0]] || '',
        city: CodeToText[value[1]] || '',
        area: CodeToText[value[2]] || ''
      }
    },
    getTextToValue(cityObj) {
      const province = TextToCode[cityObj.province]
      const city = province[cityObj.city]
      const area = city[cityObj.area]
      return [province.code, city.code, area.code]
    }
  }
}
</script>

<style lang='scss'>
</style>
